import React, { useState } from 'react';
import { Modal } from 'antd';
import styles from '../index.less';
import ProTable from '@ant-design/pro-table';
import {
    getApiCrontabByIndexByLimitExecuteRecords as getExecuteRecords
} from '@/services/furion-cms/crontab';
import { useIntl } from 'umi';

const CrontabExecuteRecord: React.FC<{
    recored?: API.CrontabDetailDto;
    jobInstanceDic?: any;
    visible: boolean;
    onVisibleChange: (visit: boolean) => void;
}> = ({ recored, jobInstanceDic, visible, onVisibleChange }) => {

    const [loadingVisible, handelLoadingVisible] = useState(false);
    /**
     * @en-US International configuration
     * @zh-CN 国际化配置
     * */
    const intl = useIntl();

    return (
        <Modal title={`${jobInstanceDic?.[recored?.instancePath ?? '']} ${intl.formatMessage({
            id: 'pages.crontab.record.title',
            defaultMessage: '任务执行记录'
        })}`}
            className={styles.record}
            width={800}
            visible={visible}
            onCancel={() => onVisibleChange(false)}
            footer={null}
            destroyOnClose>
            <ProTable<API.CrontabExecuteRecordDto>
                rowKey="id"
                loading={loadingVisible}
                search={false}
                toolBarRender={false}
                pagination={{
                    pageSize: 10,
                    showSizeChanger:true
                }}
                cardProps={{
                    bodyStyle: {
                        padding: 0
                    }
                }}
                columns={[
                    {
                        title: intl.formatMessage({
                            id: 'pages.crontab.record.status',
                            defaultMessage: '状态'
                        }),
                        dataIndex: ['executeStatus', 'code'],
                        width: 90,
                        search: false,
                        valueEnum: {
                            Run: { text: '运行中', status: 'Processing' },
                            Success: { text: '成功', status: 'Success' },
                            Fail: { text: '失败', status: 'Error' }
                        }
                    },
                    {
                        title: intl.formatMessage({
                            id: 'pages.crontab.record.result',
                            defaultMessage: '结果'
                        }),
                        dataIndex: 'result',
                        search: false,
                        ellipsis: true
                    },
                    {
                        title: intl.formatMessage({
                            id: 'pages.crontab.record.createdTime',
                            defaultMessage: '创建时间'
                        }),
                        dataIndex: 'createdTime',
                        width: 150,
                        search: false,
                        valueType: 'dateTime'
                    },
                    {
                        title: intl.formatMessage({
                            id: 'pages.crontab.record.updatedTime',
                            defaultMessage: '结束时间'
                        }),
                        dataIndex: 'updatedTime',
                        width: 150,
                        search: false,
                        valueType: 'dateTime'
                    },
                ]}
                params={{ id: recored?.id }}
                request={(params, sort, filter) => {
                    // 表单搜索项会从 params 传入，传递给后端接口。
                    console.log(params, sort, filter);
                    handelLoadingVisible(true);
                    // 转换固定的参数
                    const { current, pageSize } = params;
                    // 删除无效参数
                    delete params.current;
                    delete params.pageSize;
                    return getExecuteRecords({
                        index: (current || 1),
                        limit: (pageSize || 10),
                        ...params
                    }, sort).then(result => {
                        const { list: data, total } = result.data || {};
                        return {
                            data,
                            success: result.success,
                            total
                        }
                    }).finally(() => handelLoadingVisible(false));
                }}
            />
        </Modal>
    )
}

export default CrontabExecuteRecord;